import React, { useEffect, useState } from 'react';
import { useStore } from '@/store/useStore';
import { Form, Input, InputNumber, Select, Switch, Button, Tabs } from 'antd';
import { ComponentType } from '@/types/component';
import ModelFieldSelector from './ModelFieldSelector';

// 移除过时的 TabPane 导入
// const { TabPane } = Tabs;

const PropertyPanel = () => {
  const { 
    selectedComponentId, 
    app,
    updateComponentProps
  } = useStore();
  
  const [form] = Form.useForm();
  const [activeTab, setActiveTab] = useState('props');
  
  const pages = app.data.pages;
  const currentPageId = app.data.currentPageId;
  const models = app.data.models;
  
  const currentPage = currentPageId ? pages[currentPageId] : undefined;
  const selectedComponent = currentPage?.components.find(comp => comp.id === selectedComponentId);
  
  useEffect(() => {
    if (selectedComponent) {
      form.setFieldsValue(selectedComponent.props);
    } else {
      form.resetFields();
    }
  }, [selectedComponent, form]);

  const renderPropertyFields = () => {
    if (!selectedComponent) return null;
    
    const commonFields = [
      <Form.Item label="宽度" name="width">
        <InputNumber min={1} />
      </Form.Item>,
      <Form.Item label="高度" name="height">
        <InputNumber min={1} />
      </Form.Item>,
      <Form.Item label="标题" name="title">
        <Input />
      </Form.Item>,
      <Form.Item label="占位符" name="placeholder">
        <Input />
      </Form.Item>,
      <Form.Item label="禁用" name="disabled" valuePropName="checked">
        <Switch />
      </Form.Item>
    ];
    
    switch (selectedComponent.type) {
      case ComponentType.BUTTON:
        return [
          <Form.Item label="按钮文本" name="text" rules={[{ required: true }]}>
            <Input />
          </Form.Item>,
          <Form.Item label="按钮类型" name="type">
            <Select>
              <Select.Option value="primary">主按钮</Select.Option>
              <Select.Option value="default">默认按钮</Select.Option>
              <Select.Option value="dashed">虚线按钮</Select.Option>
              <Select.Option value="link">链接按钮</Select.Option>
              <Select.Option value="text">文本按钮</Select.Option>
            </Select>
          </Form.Item>,
          ...commonFields
        ];
      
      case ComponentType.TABLE:
        return [
          <Form.Item label="显示边框" name="bordered" valuePropName="checked">
            <Switch />
          </Form.Item>,
          <Form.Item label="显示分页" name="pagination" valuePropName="checked">
            <Switch />
          </Form.Item>,
          ...commonFields
        ];
        
      case ComponentType.INPUT:
        return [
          <Form.Item label="输入类型" name="type">
            <Select>
              <Select.Option value="text">文本</Select.Option>
              <Select.Option value="password">密码</Select.Option>
              <Select.Option value="number">数字</Select.Option>
              <Select.Option value="email">邮箱</Select.Option>
            </Select>
          </Form.Item>,
          ...commonFields
        ];
        
      case ComponentType.SELECT:
        return [
          <Form.Item label="选项">
            <Button>配置选项</Button>
          </Form.Item>,
          ...commonFields
        ];
        
      default:
        return commonFields;
    }
  };
  
  const renderDataBindingFields = () => {
    if (!selectedComponent || !models) return null;
    
    const modelOptions = Object.keys(models).map(name => ({
      label: name,
      value: name
    }));
    
    const dataBinding = selectedComponent.props?.dataBinding as { model?: string } || {};
    
    return (
      <>
        <Form.Item label="数据模型" name={['dataBinding', 'model']}>
          <Select options={modelOptions} placeholder="选择数据模型" />
        </Form.Item>
        
        {dataBinding.model && models[dataBinding.model] && (
          <Form.Item label="字段映射">
            <ModelFieldSelector 
              modelName={dataBinding.model} 
              fields={models[dataBinding.model]?.fields || []}
            />
          </Form.Item>
        )}
      </>
    );
  };

  if (!selectedComponent) {
    return (
      <div style={{ padding: 24, textAlign: 'center', color: '#999' }}>
        请选择一个组件进行配置
      </div>
    );
  }

  // 使用 items 替代 TabPane
  const tabItems = [
    {
      key: 'props',
      label: '属性',
      children: (
        <Form
          form={form}
          layout="vertical"
          initialValues={selectedComponent.props}
          onValuesChange={(changedValues, allValues) => {
            if (selectedComponentId) {
              updateComponentProps(selectedComponentId, allValues);
            }
          }}
        >
          {renderPropertyFields()}
        </Form>
      )
    },
    {
      key: 'data',
      label: '数据绑定',
      children: (
        <Form
          form={form}
          layout="vertical"
          initialValues={selectedComponent.props}
          onValuesChange={(changedValues, allValues) => {
            if (selectedComponentId) {
              updateComponentProps(selectedComponentId, allValues);
            }
          }}
        >
          {renderDataBindingFields()}
        </Form>
      )
    }
  ];

  return (
    <div style={{ padding: 16, height: '100%', overflowY: 'auto' }}>
      <h3 style={{ marginBottom: 16 }}>
        {selectedComponent.type} 配置
      </h3>
      
      <Tabs activeKey={activeTab} onChange={setActiveTab} items={tabItems} />
    </div>
  );
};

export default PropertyPanel;